<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="客户名称" prop="customerName">
          <el-input
            v-model="queryParams.customerName"
            placeholder="请输入店铺名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="店铺名称" prop="shopName">
          <el-input
            v-model="queryParams.shopName"
            placeholder="请输入店铺名称"
            clearable
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="店铺打包" prop="isManyShop">
          <el-select v-model="queryParams.isManyShop" placeholder="请选择是否店铺打包" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="平台打包" prop="isManyPlatform">
          <el-select v-model="queryParams.isManyPlatform" placeholder="请选择是否平台打包" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="价格期数" prop="pricePhase">
          <el-select v-model="queryParams.pricePhase" placeholder="请选择价格表期数" clearable>
            <el-option
              v-for="dict in dict.type.fms_price_phase"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="新增店铺" prop="isNewShop">
          <el-select v-model="queryParams.isNewShop" placeholder="请选择是否新增店铺" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="价格原价" prop="isOriginalPrice">
          <el-select v-model="queryParams.isOriginalPrice" placeholder="请选择是否价格表原价" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否差价" prop="isDiffPrice">
          <el-select v-model="queryParams.isDiffPrice" placeholder="请选择是否价有差价" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="特殊收费" prop="isSpecialPrice">
          <el-select v-model="queryParams.isSpecialPrice" placeholder="请选择是否特殊收费" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="抵加盟费" prop="isDeductionCooperate">
          <el-select v-model="queryParams.isDeductionCooperate" placeholder="请选择是否抵扣加盟费" clearable>
            <el-option
              v-for="dict in dict.type.fms_yes_no"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="合作模式" prop="cooperateMode">
          <el-select v-model="queryParams.cooperateMode" placeholder="请选择合作模式" clearable>
            <el-option
              v-for="dict in dict.type.fms_cooperate_mode"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对接财务" prop="serviceFinance">
          <el-select v-model="queryParams.serviceFinance" placeholder="请选择对接财务" clearable>
            <el-option
              v-for="item in staffFinance"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对接销售" prop="serviceSalesman">
          <el-select v-model="queryParams.serviceSalesman" placeholder="请选择对接销售" clearable>
            <el-option
              v-for="item in staffSalesman"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="对接组长" prop="serviceLeader">
          <el-select v-model="queryParams.serviceLeader" placeholder="请选择对接组长" clearable>
            <el-option
              v-for="item in staffLeader"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="结算状态" prop="payStatus">
          <el-select v-model="queryParams.payStatus" placeholder="请选择结算状态" clearable>
            <el-option
              v-for="dict in dict.type.fms_pay_status"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
  
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleAdd"
            v-hasPermi="['finance:record:add']"
          >新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="danger"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
            v-hasPermi="['finance:record:remove']"
          >删除</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
  
      <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange" border>
        
        <!-- <el-table-column type="expand" width="50" align="center">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="客户名称">
                <span>{{ props.row.customerName }}</span>
              </el-form-item>
              <el-form-item label="店铺">
                <span>{{ props.row.shopNames }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column> -->

        <el-table-column type="selection" width="50" align="center" />
        <el-table-column label="ID" align="center" prop="recordId" width="50" />
        <el-table-column label="客户名称" align="center" prop="customerName" />
        <el-table-column label="店铺" align="center" prop="shopNames" :show-overflow-tooltip="true" />

        <el-table-column label="是否多店铺打包" align="center" prop="isManyShop" width="120" />
        <el-table-column label="是否多平台打包" align="center" prop="isManyPlatform" width="120" />
        <el-table-column label="多店铺打包备注" align="center" prop="manyShopRemark" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="多平台打包备注" align="center" prop="manyPlatformRemark" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="是否收取多店铺打包费用" align="center" prop="isManyShopCost" width="170" />
        <el-table-column label="多店铺打包金额" align="center" prop="manyShopMoney" width="120" />
        <el-table-column label="多店铺打包计费方式" align="center" prop="manyShopMoneyRemark" :show-overflow-tooltip="true" width="140" />
        <el-table-column label="价格表期数" align="center" prop="pricePhase" width="100" />
        <el-table-column label="服务总天数" align="center" prop="serviceTotalDays" width="100" />
        <el-table-column label="上月接待量" align="center" prop="preMonthNum" width="100" />
        <el-table-column label="是否有新增店铺" align="center" prop="isNewShop" width="120" />
        <el-table-column label="是否价格表原价" align="center" prop="isOriginalPrice" width="120" />
        <el-table-column label="价格表价格" align="center" prop="originalPrice" width="100" />
        <el-table-column label="店铺折扣/销售谈单" align="center" prop="discountSales" width="130" />
        <el-table-column label="店铺折扣/给加盟方" align="center" prop="discountCooperate" width="130" />
        <el-table-column label="新增店铺卡齐结算日" align="center" prop="newShopAlignDay" width="140" />
        <el-table-column label="店主上月剩余金额" align="center" prop="preMonthRemainMoney" width="130" />
        <el-table-column label="应收金额" align="center" prop="originalGainMoney" width="100" />
        <el-table-column label="实收金额" align="center" prop="realGainMoney" width="100" />
        <el-table-column label="是否有差价" align="center" prop="isPriceDiff" width="100" />
        <el-table-column label="差价金额" align="center" prop="priceDiffMoney" width="100" />
        <el-table-column label="差价备注" align="center" prop="priceDiffRemark" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="上月预付金额" align="center" prop="preMonthMoney" width="100" />
        <el-table-column label="实际续费金额" align="center" prop="realRenewMoney" width="100" />
        <el-table-column label="对接财务" align="center" prop="serviceFinance" width="100" />
        <el-table-column label="对接销售" align="center" prop="serviceSalesman" width="100" />
        <el-table-column label="对接组长" align="center" prop="serviceLeader" width="100" />
        <el-table-column label="接待客服小组" align="center" prop="serviceTeam" width="100" />
        <el-table-column label="对接店铺公司" align="center" prop="serviceCompany" width="100" />
        <el-table-column label="是否特殊收费" align="center" prop="isSpecialMoney" width="100" />
        <el-table-column label="特殊收费备注" align="center" prop="specialMoneyRemark" :show-overflow-tooltip="true" width="100" />
        <el-table-column label="基地抽佣" align="center" prop="baseCommission" width="100" />
        <el-table-column label="同行抽佣" align="center" prop="sameCommission" width="100" />
        <el-table-column label="服务费比例" align="center" prop="servicePriceRatio" width="100" />
        <el-table-column label="是否抵扣加盟费" align="center" prop="isDeductionCooperate" width="120" />
        <el-table-column label="抵扣加盟订单金额" align="center" prop="deductionCooperateMoney" width="130" />
        <el-table-column label="保证金模式总抽拥比" align="center" prop="earnestMoneyRatio" width="140" />
        <el-table-column label="加盟合作模式" align="center" prop="cooperateMode" width="100" />
        <el-table-column label="加盟方" align="center" prop="cooperateName" width="100" />
        <el-table-column label="首月接待量" align="center" prop="firstMonthNum" width="100" />
        <el-table-column label="首月服务费" align="center" prop="firstMonthPrice" width="100" />
        <el-table-column label="上上月接待量" align="center" prop="pre2monthNum" width="100" />
        <el-table-column label="上上月服务费" align="center" prop="pre2monthPrice" width="100" />
        <el-table-column label="交付首月加盟接待天数" align="center" prop="deliverFirstDays" width="150" />
        <el-table-column label="交付加盟日期" align="center" prop="deliverCooperateDate" width="100" />
        <el-table-column label="店铺流转次数" align="center" prop="shopCirculationNum" width="100" />
        <el-table-column label="服务公司A" align="center" prop="serviceCompanyA" width="100" />
        <el-table-column label="A服务天数" align="center" prop="serviceDaysA" width="100" />
        <el-table-column label="A总接待量" align="center" prop="serviceNumA" width="100" />
        <el-table-column label="A应得金额" align="center" prop="serviceMoneyA" width="100" />
        <el-table-column label="服务公司B" align="center" prop="serviceCompanyB" width="100" />
        <el-table-column label="B服务天数" align="center" prop="serviceDaysB" width="100" />
        <el-table-column label="B总接待量" align="center" prop="serviceNumB" width="100" />
        <el-table-column label="B应得金额" align="center" prop="serviceMoneyB" width="100" />
        <el-table-column label="服务公司C" align="center" prop="serviceCompanyC" width="100" />
        <el-table-column label="C服务天数" align="center" prop="serviceDaysC" width="100" />
        <el-table-column label="C总接待量" align="center" prop="serviceNumC" width="100" />
        <el-table-column label="C应得金额" align="center" prop="serviceMoneyC" width="100" />
        <el-table-column label="加盟总结算金额" align="center" prop="cooperateTotalMoney" width="120" />
        <el-table-column label="特殊减免费用金额" align="center" prop="specialReductionMoney" width="130" />
        <el-table-column label="特殊减免费用原因" align="center" prop="specialReductionRemark" :show-overflow-tooltip="true" width="130" />
        <el-table-column label="当月结算状态" align="center" prop="payStatus" width="100" />
        <el-table-column label="超时未结算原因" align="center" prop="payRemark" :show-overflow-tooltip="true" width="120" />
        <el-table-column label="结算凭证" align="center" prop="payPic" width="100" >
          <template slot-scope="scope">
            <image-preview :src="scope.row.payPic" :width="50" :height="50"/>
          </template>
        </el-table-column>
        <el-table-column label="创建者" align="center" prop="createBy" width="100" />
        <el-table-column label="创建时间" align="center" prop="createTime" width="100">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['finance:record:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['finance:record:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
  
      <!-- 添加或修改对话框 -->
      <el-drawer
        :title="title" :visible.sync="open"
        direction="rtl"
        size="50%"
        :wrapper-closable="false"
        append-to-body
        >
        <div style="padding: 30px 20px;">
          <el-form ref="form" :model="form" :rules="rules" label-width="180px">
            <el-row>
              <el-col :span="12">
                <el-form-item label="客户名称" prop="customerName">
                  <el-autocomplete
                    popper-class="my-autocomplete"
                    v-model="form.customerName"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入内容"
                    @change="handleChangeCustomer"
                    @select="handleSelectCustomer">
                  </el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="24"></el-col>

              <el-col :span="24" v-if="isShowShop">
                <el-form-item label="店铺">
                  <el-checkbox-group v-model="checkedShops" @change="handleCheckedShopChange">
                    <el-checkbox v-for="shop in shopList" :label="shop.shopId" :key="shop.shopId">{{shop.shopName}}({{shop.shopPlatform}})</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>

              <el-col :span="24" v-if="isShowShopInfo">
                <el-form-item label="店铺信息">
                  <el-descriptions v-for="shop in checkedShopInfo" :key="shop.shopId" border style="margin-bottom: 10px;">
                    <el-descriptions-item label="店铺名称">{{shop.shopName}}</el-descriptions-item>
                    <el-descriptions-item label="客户名称">{{shop.customerName}}</el-descriptions-item>
                    <el-descriptions-item label="客户来源">{{shop.customerFrom}}</el-descriptions-item>
                    <el-descriptions-item label="归属平台">{{shop.shopPlatform}}</el-descriptions-item>
                    <el-descriptions-item label="主体">{{shop.shopDominant}}</el-descriptions-item>
                    <el-descriptions-item label="产品类目">{{shop.productCategory}}</el-descriptions-item>
                    <el-descriptions-item label="产品名称">{{shop.productName}}</el-descriptions-item>
                    <el-descriptions-item label="服务类型">{{shop.serviceType}}</el-descriptions-item>
                    <el-descriptions-item label="服务时间">{{shop.serviceLength}}</el-descriptions-item>
                    <el-descriptions-item label="合作状态">{{shop.shopStatus}}</el-descriptions-item>
                    <el-descriptions-item label="服务商到期时间">{{shop.serviceExpireDate}}</el-descriptions-item>
                    <el-descriptions-item label="店铺结算日">{{shop.shopSettleDay}}</el-descriptions-item>
                  </el-descriptions>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否多店铺打包">
                  <el-radio-group v-model="form.isManyShop">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="多店铺打包备注">
                  <el-input type="textarea" v-model="form.manyShopRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否多平台打包">
                  <el-radio-group v-model="form.isManyPlatform">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="多平台打包备注">
                  <el-input type="textarea" v-model="form.manyPlatformRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否收取多店铺打包费用">
                  <el-radio-group v-model="form.isManyShopCost">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="多店铺打包金额">
                  <el-input-number v-model="form.manyShopMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="多店铺打包计费方式">
                  <el-input type="textarea" v-model="form.manyShopMoneyRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="价格表期数">
                  <el-select v-model="form.pricePhase" placeholder="请选择价格表期数">
                    <el-option
                      v-for="dict in dict.type.fms_price_phase"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24"></el-col> 

              <el-col :span="12">
                <el-form-item label="服务总天数">
                  <el-input-number v-model="form.serviceTotalDays"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上月接待量">
                  <el-input-number v-model="form.preMonthNum"></el-input-number>
                </el-form-item>
              </el-col>            

              <el-col :span="12">
                <el-form-item label="是否价格表原价">
                  <el-radio-group v-model="form.isOriginalPrice">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="价格表价格">
                  <el-input-number v-model="form.originalPrice"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="店铺折扣/销售谈单">
                  <el-input type="textarea" v-model="form.discountSales"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="店铺折扣/给加盟方">
                  <el-input type="textarea" v-model="form.discountCooperate"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否有新增店铺">
                  <el-radio-group v-model="form.isNewShop">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="新增店铺卡齐结算日">
                  <el-input-number v-model="form.newShopAlignDay" :min="1" :max="31" label="描述文字"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="店主上月剩余金额">
                  <el-input-number v-model="form.preMonthRemainMoney"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="24"></el-col>

              <el-col :span="12">
                <el-form-item label="应收金额">
                  <el-input-number v-model="form.originalGainMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="实收金额">
                  <el-input-number v-model="form.realGainMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否有差价">
                  <el-radio-group v-model="form.isPriceDiff">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="差价金额">
                  <el-input-number v-model="form.priceDiffMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="差价备注">
                  <el-input type="textarea" v-model="form.priceDiffRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上月预付金额">
                  <el-input-number v-model="form.preMonthMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="实际续费金额">
                  <el-input-number v-model="form.realRenewMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="对接财务">
                  <el-input v-model="form.serviceFinance" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="对接销售">
                  <el-input v-model="form.serviceSalesman" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="对接组长">
                  <el-input v-model="form.serviceLeader" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="接待客服小组">
                  <el-input v-model="form.serviceTeam" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="对接店铺公司">
                  <el-input v-model="form.serviceCompany" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否特殊收费">
                  <el-radio-group v-model="form.isSpecialMoney">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="特殊收费备注">
                  <el-input type="textarea" v-model="form.specialMoneyRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="基地抽佣">
                  <el-input type="textarea" v-model="form.baseCommission"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="同行抽佣">
                  <el-input type="textarea" v-model="form.sameCommission"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="服务费比例">
                  <el-input type="textarea" v-model="form.servicePriceRatio"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="是否抵扣加盟费">
                  <el-radio-group v-model="form.isDeductionCooperate">
                    <el-radio
                      v-for="dict in dict.type.fms_yes_no"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="抵扣加盟订单金额">
                  <el-input-number v-model="form.deductionCooperateMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="保证金模式总抽拥比">
                  <el-input type="textarea" v-model="form.earnestMoneyRatio"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="加盟合作模式">
                  <el-select v-model="form.cooperateMode" placeholder="请选择加盟合作模式">
                    <el-option
                      v-for="dict in dict.type.fms_cooperate_mode"
                      :key="dict.value"
                      :label="dict.label"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="加盟方">
                  <el-input v-model="form.cooperateName" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="首月接待量">
                  <el-input-number v-model="form.firstMonthNum"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="首月服务费">
                  <el-input-number v-model="form.firstMonthPrice"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上上月接待量">
                  <el-input-number v-model="form.pre2monthNum"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="上上月服务费">
                  <el-input-number v-model="form.pre2monthPrice"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="交付首月加盟接待天数">
                  <el-input-number v-model="form.deliverFirstDays"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="交付加盟日期">
                  <el-date-picker
                    v-model="form.deliverCooperateDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy 年 MM 月 dd 日"
                    value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="店铺流转次数">
                  <el-input-number v-model="form.shopCirculationNum"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="24"></el-col>

              <el-col :span="12">
                <el-form-item label="服务公司A">
                  <el-input v-model="form.serviceCompanyA" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="A服务天数">
                  <el-input-number v-model="form.serviceDaysA"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="A总接待量">
                  <el-input-number v-model="form.serviceNumA"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="A应得金额">
                  <el-input-number v-model="form.serviceMoneyA"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="服务公司B">
                  <el-input v-model="form.serviceCompanyB" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="B服务天数">
                  <el-input-number v-model="form.serviceDaysB"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="B总接待量">
                  <el-input-number v-model="form.serviceNumB"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="B应得金额">
                  <el-input-number v-model="form.serviceMoneyB"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="服务公司C">
                  <el-input v-model="form.serviceCompanyC" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="C服务天数">
                  <el-input-number v-model="form.serviceDaysC"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="C总接待量">
                  <el-input-number v-model="form.serviceNumC"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="C应得金额">
                  <el-input-number v-model="form.serviceMoneyC"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="加盟总结算金额">
                  <el-input-number v-model="form.cooperateTotalMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="特殊减免费用金额">
                  <el-input-number v-model="form.specialReductionMoney"></el-input-number>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="特殊减免费用原因">
                  <el-input type="textarea" v-model="form.specialReductionRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="当月结算状态">
                  <el-radio-group v-model="form.payStatus">
                    <el-radio
                      v-for="dict in dict.type.fms_pay_status"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="超时未结算原因">
                  <el-input type="textarea" v-model="form.payRemark"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="24">
                <el-form-item label="结算凭证">
                  <image-upload v-model="form.payPic"/>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </div>
      </el-drawer>

      <el-dialog :visible.sync="dialogVisible" append-to-body>
        <img width="100%" :src="dialogImageUrl">
      </el-dialog>
    </div>
  </template>

  <style>
    .demo-table-expand {
      font-size: 0;
    }
    .demo-table-expand label {
      width: 170px;
      color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
      margin-right: 0;
      margin-bottom: 0;
      width: 10%;
    }
    .el-table .cell {
      white-space: nowrap;
    }
  </style>

  <script>
  import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/finance/record";
  import { listCustomer } from "@/api/finance/customer";
  import { listShop } from "@/api/finance/shop";
  import { listStaff } from "@/api/finance/staff";
  
  export default {
    name: "Record",
    dicts: ['fms_yes_no', 'fms_price_phase', 'fms_cooperate_mode', 'fms_pay_status'],
    data() {
      return {
        staffFinance: [],
        staffSalesman: [], 
        staffLeader: [],
        //----------
        isShowShop: false,
        isShowShopInfo: false,
        checkedShops: [],
        checkedShopInfo: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 公告表格数据
        recordList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          customerName: [
            { required: true, message: '客户名称不能为空', trigger: ['change'] },
          ],
        }
      };
    },
    // watch: {
    //   checkedShops(value) {
    //     console.log('Checkbox values changed:', value);
    //   }
    // },
    created() {
      this.getList();
    },
    mounted() {
      this.loadCustomerList();
      this.loadStaffList();
    },
    methods: {
      loadStaffList() {
        listStaff({}).then(response => {
          this.staffFinance = [];
          this.staffSalesman = [];
          this.staffLeader = [];
          for(let i in response.rows){
            if(response.rows[i].staffType == '财务'){
              this.staffFinance.push({label:response.rows[i].staffName,value:response.rows[i].staffName});
            }else if(response.rows[i].staffType == '销售'){
              this.staffSalesman.push({label:response.rows[i].staffName,value:response.rows[i].staffName});
            }else if(response.rows[i].staffType == '组长'){
              this.staffLeader.push({label:response.rows[i].staffName,value:response.rows[i].staffName});
            }
          }
        });
      },

      //------------------
      loadCustomerList() {
        listCustomer({}).then(response => {
          let arr = []
          for(let i in response.rows){
            arr.push({"value": response.rows[i].customerName, "id": response.rows[i].customerId})
          }
          this.customerList = arr;
        });
      },
      querySearch(queryString, cb) {
        var restaurants = this.customerList;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      handleSelectCustomer(item) {
        this.form.customerId = item.id;
        this.loadShopList();
      },
      handleChangeCustomer(customerName) {
        this.shopList = [];
        this.isShowShop = false,
        this.isShowShopInfo = false,
        this.checkedShops = [];
        this.checkedShopInfo = []; 
        this.form.customerId = undefined;
        if(customerName != ""){
          listCustomer({"customerName": customerName}).then(response => {
            if(response.total > 0){ 
              this.form.customerId = response.rows[0].customerId;
              this.loadShopList();
            }
          });
        }
      },
      loadShopList() {
        this.isShowShop = false;
        this.shopList = [];
        listShop({"customerId": this.form.customerId}).then(response => {
          if(response.total > 0){
            this.shopList = response.rows;
            this.isShowShop = true; 
            this.loadCheckedShop();   
          }
        });
      },
      loadCheckedShop() {
        let ids = this.form.shopIds.split(',');
        let arr = [];
        for(let i in ids){
          arr.push(parseInt(ids[i]));
        }
        this.checkedShops = arr;
        this.loadCheckedShopInfo();
      },

      loadCheckedShopInfo(){
        this.checkedShopInfo = [];
        for(let i in this.checkedShops){
          for(let j in this.shopList){
            if(this.checkedShops[i] == this.shopList[j].shopId){
              this.checkedShopInfo.push(this.shopList[j]);
              break;
            }
          }
        }
        if(this.checkedShopInfo.length > 0){
          this.isShowShopInfo = true;
        }
      },
      
      handleCheckedShopChange() {
        let names = [];
        this.checkedShopInfo = [];
        for(let i in this.checkedShops){
          for(let j in this.shopList){
            if(this.checkedShops[i] == this.shopList[j].shopId){
              names.push(this.shopList[j].shopName);
              this.checkedShopInfo.push(this.shopList[j]);
              break;
            }
          }
        }
        if(this.checkedShopInfo.length > 0){
          this.isShowShopInfo = true;
        }else{
          this.isShowShopInfo = false;
        }
        this.form.shopIds = this.checkedShops.join(",");
        this.form.shopNames = names.join(",");
      },

      manyShopMoneyChange(value) {
        console.log(value);
      },

      /** 查询列表 */
      getList() {
        this.loading = true;
        listRecord(this.queryParams).then(response => {
          this.recordList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.isShowShop = false;
        this.isShowShopInfo = false,
        this.shopList = [];
        this.checkedShopInfo = [];

        this.form = {
          recordId: undefined,
          shopIds: "",
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.noticeId)
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加财务记录";
        this.upload.fileList = [];
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const recordId = row.recordId || this.ids
        getRecord(recordId).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改财务记录";
          this.loadShopList();
        });
        this.upload.fileList = [{ name: this.form.fileName, url: this.form.filePath }];
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.recordId != undefined) {
              updateRecord(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addRecord(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const recordIds = row.recordId || this.ids
        this.$modal.confirm('是否确认删除财务记录编号为"' + recordIds + '"的数据项？').then(function() {
          return delRecord(recordIds);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      }
    }
  };
  </script>
  